<template>
	<nt-container bgColor="#fff">
		<view class="login">
			<view class="login-tab">
				<view class="login-tab__item" :class="{active: loginType === 1}" @click="changeLoginType(1)">密码登录</view>
				<view class="login-tab__item" :class="{active: loginType === 2}" @click="changeLoginType(2)">验证码登录
				</view>
			</view>
			<view class="login-body">
				<view class="login-body__item">
					<view class="login-body__item--label">手机号</view>
					<view class="login-body__item--input">
						<u--input placeholder="请输入手机号" clearable v-model="account"></u--input>
					</view>
				</view>
				<template v-if="loginType === 1">
					<view class="login-body__item">
						<view class="login-body__item--label">密码</view>
						<view class="login-body__item--input">
							<u--input placeholder="请输入登录密码" clearable v-model="password" type="password"></u--input>
						</view>
					</view>
					<view class="login-body__forgot" @tap="nav(`/subpackage/member/pages/forgot-password/index`)">忘记密码？
					</view>
				</template>
				<view class="login-body__item code" v-if="loginType === 2">
					<view class="login-body__item--label">验证码</view>
					<view class="login-body__item--input flex">
						<u--input placeholder="请输入验证码" clearable v-model="code"></u--input>
						<view class="login-body__item--send" @click="sendCode">{{codeText}}</view>
					</view>
				</view>
			</view>
			<view class="login-submit" :style="active">
				<u-button loadingText="登录中..." :loading="loading" text="登录" :disabled="loading"
					@click="login"></u-button>
			</view>
			<view class="login-agreement">
				<u-checkbox-group v-model="privacy">
					<u-checkbox />
				</u-checkbox-group>
				阅读并同意<text>
					<text @tap="readAgreement(1)">软件许可协议</text>、
					<text @tap="readAgreement(2)" style="color:black">隐私政策</text>、
					<text @tap="readAgreement(3)">服务监督协议</text>
				</text>
			</view>
			<view class="settle-in" @tap="nav(`/subpackage/member/pages/apply/master-worker`)">
				尚未入驻南天快修？<text>去申请入驻</text></view>
		</view>

	</nt-container>
</template>

<script>
	import {
		userLogin,
		sendMobileVerificationCode,
		userMobileLogin
	} from "@/api"
	import {
		cache
	} from "@/utils"
	export default {
		data() {
			return {
				loading: false,
				account: "",
				password: "",
				code: "",
				loginType: 1,
				step: 1,
				codeText: "获取验证码",
				timer: null,
				number: 60,
				privacy: false
			}
		},
		computed: {
			active() {
				if (this.loginType === 1) {
					return this.account && this.password ? "opacity: 1" : "opacity: 0.5"
				} else {
					return this.account && this.code ? "opacity: 1" : "opacity: 0.5"
				}

				return "opacity: 0.5"
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			// 登录
			login() {
				if (!this.check()) return;
				if (!this.privacy) return this.toast("请阅读相关协议")
				this.loading = true
				this.loginType === 1 ? this.accLogin() : this.mobileLogin()
			},
			// 账号密码登录
			accLogin() {
				userLogin(this.account, this.password).then(async res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						cache.set.token(data.userinfo.token)
						const UserInfo = await this.$store.dispatch('user/getUserInfo')
						this.$store.dispatch('user/location')
						this.$store.dispatch('user/getPushClientId', data.userinfo.id)
						this.toast("登录成功")
						setTimeout(() => {
							this.$store.dispatch("user/getOrderCount")
							if (UserInfo?.data?.withdrawa_back_status === 1) {
								uni.reLaunch({
									url: '/subpackage/member/pages/warranty/index'
								})
							} else {
								this.swi("/pages/staging/index")
							}
						}, 1000)
						return
					}
				}).catch(err => {
					this.toast("登录异常")
				}).finally(() => {
					this.loading = false
				})
			},
			// 验证码登录
			mobileLogin() {
				userMobileLogin(this.account, this.code).then(res => {
					const {
						code,
						data
					} = res;
					if (code === 1) {
						cache.set.token(data.userinfo.token)
						this.$store.dispatch('user/getUserInfo')
						this.$store.dispatch('user/location')
						this.$store.dispatch('user/getPushClientId', data.userinfo.id)
						this.toast("登录成功")
						setTimeout(() => {
							this.$store.dispatch("user/getOrderCount")
							this.swi("/pages/staging/index")
						}, 1000)

					}
				}).finally(() => {
					this.loading = false
				})
			},
			// 发送验证码
			sendCode() {
				console.log(this.step)
				if (this.step === 2) return;
				if (!this.account) return this.toast("请输入手机号");
				sendMobileVerificationCode(this.account, "login").then(res => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 1) {
						this.toast("验证码已发送")
						this.step = 2
						this.down()
						return;
					}
					this.toast(msg)
				}).catch(() => {
					this.toast("验证码发送失败")
				})
			},
			changeLoginType(type) {
				this.loginType = type
			},
			down() {
				this.timer = setInterval(() => {
					if (this.number <= 0) {
						this.codeText = "重新获取"
						this.step = 3
						this.number = 60
						clearInterval(this.timer)
						return;
					}
					this.number--
					this.codeText = `${this.number}s`
				}, 1000)
			},
			check() {
				if (!this.account) {
					this.toast("请输入手机号")
					return false
				} else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.account) && this.loginType === 2) {
					this.toast("手机号格式错误")
					return false
				}
				if (this.loginType === 1) {
					if (!this.password) {
						this.toast("请输入登录密码")
						return false;
					}
				} else {
					if (!this.code) {
						this.toast("请输入验证码")
						return false;
					}
				}
				return true
			},
			readAgreement(index) {
				let src = ""
				switch (index) {
					case 1:
						src = "https://m.nantianit.com/apiv2/xy/protocol?funtype=rjxy"
						break
					case 2:
						src = "https://m.nantianit.com/apiv2/xy/protocol?funtype=ysxy"
						break
					case 3:
						src = "https://m.nantianit.com/apiv2/xy/protocol?funtype=fwxy"
						break
				}
				this.nav('/pages/webview/index?src=' + src)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./style.scss";
</style>